<template>
    <div class="wrap">
        <div class="weather">
            <div class="circle bottom"></div>
            <div class="circle middle"></div>
            <div class="circle top"></div>
        </div>
        <div class="search">
            <div class="search-title">
                <text class="search-title-text">DAILY</text>
                <text class="search-title-label">日记是开启美好记忆的那把钥匙</text>
            </div>
            <image class="search-icon" src="bmlocal://assets/search.png" ></image>
        </div>
        <div class="slider"
            ref="slider"
            :style="{'width': sliderWidth + 'px'}"
            @horizontalpan="onEpPanStart">
            <div v-for="(item,index) in items" :key="index" 
             class="slider-item"
             :style="{'width': cardWidth + 'px','margin-left': cardMargin + 'px'}"
             @click="notice" >
                <div class="item-title" >
                    <text class="item-title-day">31</text>
                    <div class="item-title-date">
                        <text class="item-title-week">星期天</text>
                        <text class="item-title-month">2018年10月</text>
                    </div>
                    <div class="item-title-weather">
                        <image src="bmlocal://assets/sun.png" class="item-title-weather-icon" ></image>
                    </div>
                </div>
                <div class="item-content" >
                    <image src="bmlocal://assets/weather.png" class="item-content-image" ></image>
                    <text class="item-content-text">人生苦短，不如皮卡。。。</text>
                </div>
                <div class="item-icons" >
                    <div class="item-icon-image">
                        <image src="bmlocal://assets/antimage.png" class="item-icon-image-icon"></image>
                    </div>
                    <div class="item-icon-camera">
                        <image src="bmlocal://assets/antcamera.png" class="item-icon-camera-icon"></image>
                    </div>
                </div>
             </div>
        </div>
    </div>
</template>
<style scoped>
.wrap {
  overflow: hidden;
}

.weather {
  width: 750px;
  height: 200px;
}

.circle {
  width: 1500px;
  height: 1500px;
  border-top-left-radius: 750px;
  border-top-right-radius: 750px;
  border-bottom-left-radius: 750px;
  border-bottom-right-radius: 750px;
  position: absolute;
}

.bottom {
  top: -1300px;
  left: -600px;
  background-color: rgb(202, 202, 202);
  box-shadow: 0 0 30px rgb(155, 155, 155);
}

.middle {
  top: -1300px;
  right: -800px;
  background-color: #ffffff;
  box-shadow: 0 0 30px rgb(223, 217, 217);
}

.top {
  top: -1370px;
  left: -800px;
  background-color: #faca45;
  box-shadow: 0 0 30px #f7c02a;
}

.search {
    width: 750px;
    height: 150px;
    padding-left: 50px;
    padding-right: 50px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.search-title {
    flex: 1;
    
}

.search-title-text {
    font-size: 56px;
}

.search-title-label {
    font-size: 24px;
    color: #898989;
}

.search-icon {
    width: 50px;
    height: 50px;
}

.slider {
  /* width: 1920px; */
  height: 800px;
  /* background-color: #2525d8; */
  flex-direction: row;
  align-items: center;
  padding-left: 30px;
}

.slider-item {
  /* width: 600px; */
  height: 800px;
  /* margin-left: 30px; */
  background-color: #ffffff;
  align-items: center;
  justify-content: space-around;
  padding-left: 50px;
  padding-right: 50px;
}

.item-title {
  width: 500px;
  height: 150px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.item-title-day {
  font-size: 76px;
  line-height: 78px;
}

.item-title-date {
  flex: 1;
  align-items: flex-start;
  padding-left: 20px;
}

.item-title-week {
  font-size: 28px;
  color: #898989;
  line-height: 36px;
}

.item-title-month {
  font-size: 28px;
  color: #898989;
  line-height: 28px;
}

.item-title-weather {
  width: 80px;
  height: 80px;
  align-items: center;
  justify-content: center;
}

.item-title-weather-icon {
  width: 60px;
  height: 60px;
}

.item-content {
  width: 500px;
  align-items: flex-start;
}

.item-content-image {
  width: 500px;
  height: 500px;
}

.item-content-text {
  font-size: 28px;
  color: #898989;
  margin-top: 20px;
}

.item-icons {
  width: 500px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.item-icon-image {
  width: 100px;
  height: 100px;
  align-items: flex-start;
  justify-content: center;
}

.item-icon-image-icon {
  width: 60px;
  height: 60px;
}

.item-icon-camera {
  width: 100px;
  height: 100px;
  align-items: flex-start;
  justify-content: center;
}

.item-icon-camera-icon {
  width: 60px;
  height: 60px;
}

.item-color-0 {
  background-color: #ff0000;
}

.item-color-1 {
  background-color: #0000ff;
}

.item-color-2 {
  background-color: #00ff00;
}
</style>
<script>
const animation = weex.requireModule("animation");
var startMove,
  endMove,
  direction = -1,
  selectIndex = 0,
  isAnimate = false;
export default {
  data() {
    return {
      move: 0,
      sliderWidth: 0,
      cardWidth: 600,
      cardMargin: 30,
      items: [
        {
          title: "0"
        },
        {
          title: "0"
        },
        {
          title: "0"
        }
      ]
    };
  },
  created() {
    this.move = this.cardWidth + this.cardMargin;
    this.sliderWidth = (this.cardWidth + this.cardMargin)*this.items.length + 30; 
  },
  methods: {
    notice() {
      if (isAnimate) {
        return;
      } else {
        this.$notice.toast({
          message: "dsfsdfs"
        });
      }
    },
    //   stopBubble(e){
    //       e.stopPropagation;
    //   },
    onEpPanStart(e) {
      var vm = this;
      //   console.log('onEpPanStart:' + JSON.stringify(e));
      if (e.state === "start") {
        startMove = e.changedTouches[0].screenX;
      }
      if (e.state === "end") {
        // setTimeout(() => {
        if (isAnimate) {
          return;
        } else {
          const sliderCtn = vm.$refs.slider.ref;
          isAnimate = true;
          endMove = e.changedTouches[0].screenX;
          if (endMove - startMove > 0) {
            selectIndex--;
            if (selectIndex < 0) {
              selectIndex = vm.items.length - 1;
            }
          } else {
            selectIndex++;
            if (selectIndex == vm.items.length) {
              selectIndex = 0;
            }
          }
          animation.transition(
            sliderCtn,
            {
              styles: {
                transform:
                  "translateX(" + direction * selectIndex * vm.move + "px)"
              },
              duration: 600,
              timingFunction: "ease-out"
            },
            function() {
              isAnimate = false;
            }
          );
        }

        // vm.bindExp(sliderCtn);
        // })
      }
    },
    bindExp(element) {}
  }
};
</script>
